<template>
  <div class="chainMap">
    <div class="title">国内疫情地图</div>
    <!-- 地图容器 -->

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <van-tabs v-model="active" animated @change='change'>
      <van-tab title="现存确诊">
        <div id="nowMain" style="width: 7.5rem; height: 7rem"></div>
      </van-tab>
      <van-tab title="累计确诊">
        <div id="main" style="width: 7.5rem; height: 7rem"></div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
//导入api
import api from "../../api";

export default {
  data() {
    return {
      active: 0,
      arr: []//累计
    };
  },
  //3. echarts实例-创建地图
  mounted() {
    console.log(this,'aaaaa');
    //获取疫情数据
    api.getChinaData().then((res) => {
      //获取省份数据
      let citys = res.data.data.list;
      if (!citys) {
        this.$myChart.chinaMap("nowMain", []);
        return;
      }
      let arr = []; //累计
      let nowArr = []; //现存
      for (let i = 0; i < citys.length; i++) {
        let obj = {};//积累确诊对象
        obj.name = citys[i].name;//省份名字
        obj.value = citys[i].value;//积累确诊
        let now = {};//现存确诊对象
        now.name = citys[i].name;//省份名字
        now.value = citys[i].econNum;//现存确诊
        //添加到数组中
        arr.push(obj);
        nowArr.push(now);
      }
      this.arr = arr;
      this.$nextTick(() => {
        this.$myChart.chinaMap("nowMain", nowArr);
      })
    })

  },
  methods: {
    change(title) {//name,title
      if (title == 1) {
        this.$nextTick(() => {
          this.$myChart.chinaMap("main", this.arr,title);
        });
      }
    }
  }
};
</script>

<style scoped>
.chainMap{
  margin-bottom: 12px;
}
.title {
  margin: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px solid #eee;
}

.title::before {
  content: "";
  border-left: 0.1rem solid rgb(9, 60, 202);
  font-size: 0.26rem;
  margin-right: 0.1rem;
}

#main, #nowMain {
  background: #f5f5f5;
}
</style>
